<template>
  <a-modal v-model:visible="visible" width="45vw" title="提示" unmount-on-close>
    <div class="tips-text">
      <span> 当前订单下存在</span>
      <span class="bold">{{ carLicenseNo }}</span>
      <span>的未结束的ETC租赁订单，{{operateStr == '换车' ? '车辆被换下' : '还车'}}后，其ETC租赁订单会自动结束，用车人将无法继续使用，可能造成经济损失。</span>
    </div>
    <div class="mt">
      <span>请确认是否继续</span>
      <span class="bold">{{ operateStr }}</span>
      <span>操作？</span>
    </div>

    <template #footer>
      <a-space>
        <a-button @click="onCancel">关闭</a-button>
        <a-button type="primary" @click="onConfirm" :loading="okLoading">确认{{ operateStr }}</a-button>
      </a-space>
    </template>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue'

  const visible = ref(false)
  const operateStr = ref('')
  const carLicenseNo = ref('')
  const emit = defineEmits(['ok'])
  const open = (record) => {
    carLicenseNo.value = record.carLicenseNo
    operateStr.value = record.operateStr
    visible.value = true
  }
  const okLoading = ref(false)
  const onCancel = () => {
    okLoading.value = false
    visible.value = false
  }
  const onConfirm = () => {
    visible.value = false
    emit('ok')
  }
  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .tips-text {
    color: red;
  }
  .bold {
    font-weight: bold;
  }
  .mt {
    margin-top: 10px;
  }
</style>
